<template>
    <LoadPage :show="show" />
    <view class="main dispaly-just-between flex-warp">
        <view class="dispaly-align-center w-100" v-if="!dataList.length">
            <Empty />
        </view>
        <view class="item" v-else v-for="item in dataList" :key="item.id"
            @click="$goUrl(`/subPackage/index/caseDetail?id=${item.id}`)">
            <view class="cover">
                <image :src="item.image" mode="aspectFill" />
            </view>
            <view class="desc dispaly-just-between">
                <view class="desc-title over-1">{{ item.name }}</view>
                <view class="desc-r dispaly-center">
                    <view class="p"></view>
                    <view class="f">{{ item.style }}</view>
                </view>
            </view>
            <view class="more">{{ item.title }}</view>
        </view>
        <view class="dispaly-align-center w-100">
            <LoadMore :status="status" v-if="dataList.length" />
        </view>
    </view>
</template>

<script setup>
import { getCaseList } from '@/api/apiList';
import { ref, reactive } from 'vue';
import { onLoad, onReachBottom, onPullDownRefresh } from '@dcloudio/uni-app';


// 获取案例
const dataList = ref([])
let queryTwo = reactive({
    pageNum: 1,
    pageSize: 8,
})
let status = ref('noMore')
let show = ref(true)
const getDataList = async () => {
    status.value = 'loading';
    const res = await getCaseList(queryTwo)
    if (res.code == 200) {
        if (res.rows.length) {
            dataList.value = [...dataList.value, ...res.rows]
            status.value = 'noMore'
        } else {
            status.value = 'noMore'
        }
        show.value = false
    }
}

onLoad(() => {
    getDataList()
})

onReachBottom(() => {
    queryTwo.pageNum++
    getDataList()
})

onPullDownRefresh(async () => {
    uni.showLoading({
        title: '加载中',
        icon: 'none'
    })
    dataList.value = []
    queryTwo.pageNum = 1
    await getDataList()
    uni.stopPullDownRefresh()
    uni.hideLoading()
})

</script>
<style lang="scss" scoped>
.main {
    padding: 30rpx;

    .item {
        max-width: 330rpx;
        margin-bottom: 40rpx;

        .cover {

            margin-bottom: 23rpx;

            image {
                width: 330rpx;
                height: 230rpx;
                border-radius: 15rpx;
            }
        }

        .more {
            font-family: PingFang-SC, PingFang-SC;
            font-weight: 500;
            font-size: 24rpx;
            color: #555555;
            margin-top: 33rpx
        }

        .desc {
            border-bottom: 1rpx solid #fff;
            padding-bottom: 15rpx;

            .desc-title {
                font-family: PingFang-SC, PingFang-SC;
                font-weight: bold;
                font-size: 32rpx;
                color: #222222;
            }

            .desc-r {
                .p {
                    width: 6rpx;
                    border-radius: 50%;
                    height: 6rpx;
                    background: #FB4E47;
                    margin-right: 10rpx;
                }

                .f {
                    font-family: PingFang-SC, PingFang-SC;
                    font-weight: 500;
                    font-size: 22rpx;
                    color: #999999;
                }
            }
        }
    }
}
</style>